<template>
    <div id="jw-layout" style="height:800px">
        <el-container style="padding: 0px;height: 800px">
            <el-header style="text-align: right; font-size: 12px;height: 85px;background-color: #34495e" >
                <SHeader></SHeader>
            </el-header>
            <el-container style="z-index: 1">
                <el-aside width="200px" height="1200px" style="background-color: white">
                    <SAside></SAside>
                </el-aside>
                <el-container>
                    <el-main style="height: 714px">
                        <router-view></router-view>
                    </el-main>
                    <el-footer></el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>

    import SAside from "./SAside";
    import SHeader from "./SHeader";

    export default {
        name: 'Layout',
        components: {
            SAside,
            SHeader,
        },
    }
</script>
<style scoped>
    .layout-container-demo .el-header {
        position: relative;
        background-color: var(--el-color-primary-light-7);
        color: var(--el-text-color-primary);
    }
    .layout-container-demo .el-aside {
        color: var(--el-text-color-primary);
        background: var(--el-color-primary-light-8);
    }
    .layout-container-demo .el-menu {
        border-right: none;
    }
    .layout-container-demo .el-main {
        padding: 0;
    }
    .layout-container-demo .toolbar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        right: 20px;
    }
</style>
